import React from "react";
import { NavLink, To } from "react-router-dom";
interface PropsType {
  sex: string;
  qwe: string;
}

interface StateType {
  message: string;
  age: number;
}

class Index extends React.Component<PropsType, StateType> {
  // 节点
  h2: React.RefObject<any> = React.createRef();
  // 内容状态
  state = {
    message: "类组件",
    age: 18,
  };
  render(): React.ReactNode {
    const { message, age } = this.state;
    const { qwe, sex } = this.props;
    return (
      <div>
        <h1>{message}</h1>
        <h2 ref={this.h2}>{age}</h2>
        <h3>
          {qwe}--{sex}
        </h3>
        <button onClick={() => this.setState({ age: age + 1 })}>点击+1</button>
        <NavLink to="/fn">点我去函数组件</NavLink>
        <NavLink
          to={{
            pathname: "/fn",
            search: "name=张三&age=14",
            hash: "123456789",
          }}
        >
          点我去函数组件
        </NavLink>
      </div>
    );
  }
  componentDidMount() {
    console.log("页面初次渲染完毕");
    console.log(this.h2.current);
  }
}

export default Index;
